<template>
  <div>
    <div class="top">
      <div class="top_img">
        <img :src="avatar ? avatar : '../icon/03.png'" />
      </div>
      <div class="top_name">{{ name || "未知" }}</div>
      <div class="top_num">{{ count }}人正在刷题</div>

      <div class="top_bottom">
        <mt-swipe :auto="4000" :show-indicators="false">
          <mt-swipe-item v-for="item in bannerList" :key="item.id"
            ><img :src="item.image"
          /></mt-swipe-item>
          <!-- <mt-swipe-item><img src="../icon/04.png" /></mt-swipe-item>
          <mt-swipe-item><img src="../icon/04.png" /></mt-swipe-item> -->
        </mt-swipe>
      </div>
    </div>
    <div class="biaoti">海量题库</div>
    <div class="center">
      <div class="centerlist">
        <div @click="jump(0)">
          <div>
            <img src="../icon/05.png" alt="" />
          </div>
          <div>安管人员(ABC)</div>
        </div>

        <div @click="jump(1)">
          <div>
            <img src="../icon/09.png" alt="" />
          </div>
          <div>二级建造师</div>
        </div>

        <div @click="jump(2)">
          <div>
            <img src="../icon/10.png" alt="" />
          </div>
          <div>二级造价师</div>
        </div>
      </div>
      <div class="centerlist">
        <div class="div" @click="jump(3)">
          <div>
            <img src="../icon/08.png" alt="" />
          </div>
          <div>一级建造师</div>
        </div>

        <div class="div" @click="jump(4)">
          <div>
            <img src="../icon/06.png" alt="" />
          </div>
          <div>五大员</div>
        </div>

        <div class="div" @click="jump(5)">
          <div>
            <img src="../icon/07.png" alt="" />
          </div>
          <div>八大工</div>
        </div>
      </div>
    </div>

    <div class="dat">
      <div class="dat-txt">刷题进度</div>
      <div class="dat-img">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="top"
          :offset="[-18, 8]"
        >
          <template #reference>
            <img src="../icon/11.png" alt="" />
          </template>
        </van-popover>
      </div>
    </div>

    <div class="exercise_bottom" @click="navTopracticeTest">
      <div class="exercise_bottom_flex">
        <div>{{ processTitle }}</div>
        <div class="exercise_bottom_fleximg">
          <img src="../icon/16.png" alt="" />
        </div>
      </div>
      <div class="progress">
        <!-- <el-progress
          color="#fff"
          :percentage="30"
          :format="format"
          :show-text="false"
          stroke-linecap="square"
        ></el-progress> -->
        <div
          class="line-status"
          :style="`width:${parseInt(
            (processData.answer_number / processData.number) * 100
          )}%`"
        ></div>
        <div class="text-desc">已经作答{{ processData.answer_number }}道题</div>
      </div>
      <div class="exercise_bottom_num">
        <div>0</div>
        <div>{{ processData.number }}</div>
      </div>
    </div>
    <div class="dingbottom">
      <div
        @click="
          $router.push({ path: '/errororcollecttopic', query: { type: 1 } })
        "
      >
        <img src="../icon/index_icon01.png" alt="" />
        错题记录
      </div>
      <div
        @click="
          $router.push({
            path: '/errororcollecttest',
            query: {
              type: 2,
              id: 1,
            },
          })
        "
      >
        <img src="../icon/index_icon02.png" alt="" />
        收藏
      </div>
      <div @click="$router.push('/contactus')">
        <img src="../icon/index_icon03.png" alt="" />
        联系老师
      </div>
    </div>
  </div>
</template> 

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      menuArr: [],
      bannerList: [],
      count: 16032,
      actions: [{ text: "空空如也~" }],
      showPopover: false,
      processData: {},
      processTitle: "主要负责人A证",
      pid: "",
      avatar: "",
      name: "",
      phone: "",
    };
  },
  components: {
    // "c-alen": calen,
  },
  mounted: function () {
    this.getdatalist();
    this.countPeople();
    this.process(2);
    this.$http.get("/api/mzcy/tklb/userzl").then((res) => {
      if (res.status === 200) {
        this.avatar = res.data.headimgurl;
        this.name = res.data.nickname;
        this.phone = res.data.phone;
      }
    });
  },
  methods: {
    navTopracticeTest() {
      this.$router.push({
        path: "/practicetest",
        query: {
          pid: this.pid,
          type: this.processData.type,
          pidTitle: this.processTitle,
          title: "随机练习",
        },
      });
    },
    // 切换其他
    onSelect(action) {
      // console.log(action);
      this.processTitle = action.text;
      this.process(action.id);
    },
    process(id) {
      this.pid = id;
      this.$http.get("/api/mzcy/tklb/index?xclass_id=" + id).then(
        function (res) {
          this.processData = res.data.xtmn[2];
          // console.log(res.data.xtmn[2], 1111);
          // console.log(this.backdata);
          // console.log(this.backdata2);
        },
        function (res) {
          // 响应错误回调
        }
      );
    },
    // 刷题人数
    countPeople() {
      this.setIntervalId = setInterval(() => {
        let randomCount = Math.random();
        if (Math.floor(randomCount * 10) % 3 == 1) {
          if (this.count > 10000)
            this.count = this.count - Math.floor(randomCount * 10);
        } else {
          if (this.count < 20000)
            this.count = this.count + Math.floor(randomCount * 10) * 2;
        }
        // // console.log(111);
      }, 2500);
    },
    //进度条控制
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    //
    jump: function (index) {
      if (index === 4 || index === 5) {
        Toast("功能正在火速开发中，敬请期待~");
        return;
      }
      this.$router.push({
        path: "/classification",
        query: { id: this.menuArr[index].id },
      });
    },
    getdatalist: function () {
      this.$http.get("/api/mzcy/tklb/menu").then(
        (res) => {
          // 响应成功回调
          // console.log(res.data.data);
          this.menuArr = res.data.data;
          this.bannerList = res.data.banner_list;
          this.actions = res.data.data[0].subclass.map((item) => {
            item.text = item.title;
            delete item.title;
            return item;
          });
        },
        (res) => {
          // 响应错误回调
        }
      );
    },
  },
  beforeDestroy() {
    clearInterval(this.setIntervalId);
  },
};
</script>

<style scoped>
@import url("../css/home.css");
</style>
